<template>
  <div>
    <el-form ref="form" :model="form" label-width="85px">
      <el-form-item label="头像：">
        <el-upload
          :action="action"
          :on-success="handleSuccess"
          accept="image/*"
          :headers="{
            token: token,
          }"
          :show-file-list="false"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="昵称：">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="简介：">
        <el-input
          type="textarea"
          rows="3"
          v-model="form.bio"
          :placeholder="placeholder"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份：">
        <!-- <el-input v-model="form.desc"></el-input> -->
        <span v-if="form.group_id == 2">运动员</span>
        <span v-else-if="form.group_id == 3">摄影师</span>
        <span v-else>暂无认证</span>
        <router-link to="auth" v-if="form.group_id === 1">
          <el-button size="mini" style="margin-left: 20px" type="danger"
            >去认证</el-button
          >
        </router-link>
      </el-form-item>
      <el-form-item label="绑定微信：">
        <span v-if="form.openid">已绑定</span>
        <span v-else>暂无认证</span>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="form.gender">
          <!-- <el-radio :label="0">保密</el-radio> -->
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日：">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地址：">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <!--      <el-form-item label="备注：">-->
      <!--        <el-input v-model="form.bio"></el-input>-->
      <!--      </el-form-item>-->
      <!-- <el-form-item>
        <div class="checkBox">
          <el-checkbox v-model="checked"></el-checkbox>同意并阅读
          <span class="pointer" @click="open">使用条款盒隐私策略</span>
        </div>
      </el-form-item> -->
      <el-form-item>
        <div class="saveBtn pointer" @click="onSubmit">提交</div>
      </el-form-item>
    </el-form>
    <agreement ref="agreementRef" />
  </div>
</template>

<script>
export default {
  name: "NavBar",
  components: {
    agreement: () => import("./agreement.vue"),
  },
  data() {
    return {
      action: "",
      form: {},
      authInfo: {},
      token: "",
      checked: true,
      placeholder: "这个人很懒，什么都没留下...",
      auth_key: "",
    };
  },
  mounted() {
    this.action = this.BASE_URL + "/common/upload";
    this.token = localStorage.getItem("token");
    this.getUser();
  },
  methods: {
    getUser() {
      this.$post("/user/userinfo", { auth_key: this.auth_key }).then((res) => {
        this.form = res.data.userinfo;
      });
    },
    onSubmit() {
      this.$post("/user/update_profile", this.form).then((res) => {
        if (res.code == 1) {
          this.$message.success("保存成功");
          setTimeout(() => {
            location.reload();
          }, 1500);
        }
      });
    },
    handleSuccess(res, file) {
      this.form.avatar = res.data.fullurl;
    },
    open() {
      this.$refs.agreementRef.open();
    },
  },
};
</script>

<style scoped lang="scss">
.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.idCard {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  :deep .el-upload {
    width: 250px;
    height: 158px;
    font-size: 50px;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
  }
  .example {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    color: #999;
    img {
      width: 250px;
      margin-left: 20px;
      height: 158px;
    }
  }
}
.saveBtn {
  color: #fff;
  background: #917bbd;
  font-size: 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 100px;
  line-height: 2;
}
.checkBox {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    color: #917bbd;
  }
  :deep .el-checkbox__input.is-checked .el-checkbox__inner,
  :deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #917bbd;
    border-color: #917bbd;
  }
}
@media screen and (max-width: 768px) {
  .idCard {
    display: block;
  }
  .idCard .example {
    width: 100%;
  }
  :deep .idCard .el-upload {
    width: 225px;
    height: 130px;
    margin-bottom: 10px;
  }
  .idCard .example img {
    width: 225px;
    margin-left: 20px;
    height: 130px;
  }
}
</style>
